<template>
  <div class="container">
    <h1>今年：{{age}} </h1>
    <h1>后年： {{newAge}}</h1>
    <input type="text" v-model=newAge>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, reactive, toRefs, ref, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    const age = ref (18)
    // const newAge = computed (() => (age.value + 2))

    // 高级用法
    const newAge = computed ({
      get () {
        return age.value + 2
      },
      set (value) {
        age.value = value -2
      }
    })

    return {age, newAge}
  }
}
</script>
